@import "./init.less";
@import "./usual.less";
.padding {
	padding: 20px 0;
}
button {
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

//单选 radio
.v-radio {
	cursor: pointer;
	margin-right: 28px;
	&.disable {
		color: #ccc;
		cursor: not-allowed;
	}
	.v-radio_input {
		position: relative;
		border: 1px solid #ff5858;
		border-radius: 50%;
		margin-right: 8px;
		transition: 0.3s;
		&.disable {
			border-color: #dad3d3;
		}
		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			content: "";
			width: 8px;
			height: 8px;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: #fff;
		}
		&.checked {
			background: #ff5858;
		}
		.v-radio_inner {
			width: 16px;
			height: 16px;
			border-radius: 50%;
		}
		.v-radio_original {
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
		}
	}
}

//多选 checkBox
.v-checkbox-group {
	.v-checkbox-all {
		cursor: pointer;
		margin-right: 20px;
		&.disabled {
			cursor: not-allowed;
			color: #ccc;
		}
		.v-all_inner {
			position: relative;
			width: 16px;
			height: 16px;
			border: 1px solid #ff5858;
			border-radius: 3px;
			margin-right: 8px;
			&.checked {
				background-color: #ff5858;
			}
			&.disabled {
				border-color: #ccc;
			}
			&::before {
				position: absolute;
				top: 50%;
				left: 50%;
				content: "";
				width: 8px;
				height: 8px;
				border-radius: 3px;
				background-color: #fff;
				transform: translate(-50%, -50%);
			}
		}
	}
	.v-checkbox {
		cursor: pointer;
		margin-right: 28px;
		&.disable {
			color: #ccc;
			cursor: not-allowed;
		}
		.v-checkbox_input {
			position: relative;
			border: 1px solid #ff5858;
			border-radius: 3px;
			margin-right: 8px;
			transition: 0.3s;
			&.disable {
				border-color: #dad3d3;
				&.checked {
					background-color: #dad3d3;
				}
			}
			&::before {
				position: absolute;
				top: 50%;
				left: 50%;
				content: "";
				width: 10px;
				height: 3px;
				border: 1px solid #fff;
				border-top: 0;
				border-right: 0;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
			&.checked {
				background: #ff5858;
			}
			.v-checkbox_inner {
				width: 16px;
				height: 16px;
				border-radius: 3px;
			}
			.v-checkbox_original {
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}
		}
	}
}

//输入框 input
.v-input {
	position: relative;
	width: 100%;
	user-select: none;
	cursor: pointer;
	&.disabled {
		.v-input_inner {
			color: #999;
			background-color: #f7f7f7;
			cursor: not-allowed;
		}
	}
	.v-input_inner,
	.v-textarea_inner {
		display: inline-block;
		width: 100%;
		padding: 13px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 5px;
		color: #565656;
		&::placeholder {
			color: #ccc;
		}
	}
	.v-input_inner {
		height: 36px;
		line-height: 34px;
		cursor: pointer;
	}
	&:not(.disabled) .v-input_inner {
		&:hover {
			border: 1px solid #ccc;
		}
		&:focus {
			border: 1px solid #ff5858;
		}
	}
	.v-textarea_inner {
		resize: vertical;
	}
	.v-input_icon {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		font-size: 16px;
		.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	}
	.v-input_count {
		font-size: 12px;
		color: #999;
	}
}

//计数器 inputNumber
.v-input-number {
	position: relative;
	width: 160px;
	&.disabled {
		cursor: not-allowed;
	}
	.v-input {
		width: 100%;
		.v-input_inner {
			text-align: center;
			padding: 13px 40px;
		}
	}
	.v-input_btn {
		position: absolute;
		top: 1px;
		bottom: 1px;
		width: 40px;
		font-size: 18px;
		color: #888;
		background: #f7f7f7;
		z-index: 1;
		user-select: none;
		cursor: pointer;
		&.disabled {
			cursor: not-allowed;
		}
		&.decrease {
			left: 1px;
			border-right: 1px solid #ddd;
			border-radius: 5px 0 0 5px;
		}
		&.increase {
			right: 1px;
			border-left: 1px solid #ddd;
			border-radius: 0 5px 5px 0;
		}
	}
}

//选择器 select
.v-select {
	position: relative;
	width: 200px;
	cursor: pointer;
	.v-select_icon {
		position: absolute;
		top: 50%;
		right: 13px;
		transform: translateY(-50%) rotate(-45deg);
		width: 6px;
		height: 6px;
		border: 1px solid #ccc;
		border-top: 0;
		border-right: 0;
		transition: 0.42s;
		&.up {
			top: calc(50% + 2px);
			transform: translateY(-50%) rotate(135deg);
		}
	}
	.v-select-option {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 100%;
		padding: 6px 0;
		box-sizing: border-box;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		z-index: 100;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 13px;
			border: 6px solid transparent;
			border-bottom-color: #fff;
			transform: translateY(-100%);
			z-index: 10;
		}
		&::after {
			content: "";
			position: absolute;
			top: -1px;
			left: 13px;
			border: 6px solid transparent;
			border-bottom-color: #ddd;
			transform: translateY(-100%);
			z-index: 9;
		}
		.v-option_item {
			padding: 0 10px;
			height: 30px;
			line-height: 30px;
			color: #565656;
			cursor: pointer;
			&.select,
			&:hover {
				color: #fff;
				background: #ff5858;
			}
			&.disabled {
				cursor: not-allowed;
				color: #fff;
				background: #eee !important;
				&:hover {
					background: #eee !important;
				}
			}
		}
	}
}

//开关 switch
.v-switch {
	cursor: pointer;
	&.disabled {
		cursor: not-allowed;
	}
	.v-switch_core {
		position: relative;
		height: 20px;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10px;
		color: #fff;
		font-size: 12px;
		border: 1px solid #dcdfe6;
		background: #dcdfe6;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 2px;
			transform: translateY(-50%);
			width: 17px;
			height: 17px;
			border-radius: 50%;
			background: #fff;
			transition: all 0.2s;
		}
		.v-switch_desc {
			position: absolute;
			left: calc(100% - 5px);
			transform: translateX(-100%);
			transition: all 0.2s;
		}
		&.checked {
			border: 1px solid #ff5858;
			background: #ff5858;
			&::after {
				left: 100%;
				margin-left: -18px;
			}
			.v-switch_desc {
				top: 0;
				left: 5px;
				transform: translateX(0);
			}
		}
	}
}

//头像列表 avatarList
.v-avatar-list {
	&.disabled {
		cursor: not-allowed;
	}
	.v-avatar-item,
	.v-avatar_leave {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 0;
		border-radius: 50%;
		border: 1px solid #fff;
		margin-left: -10px;
		&.disabled {
			cursor: not-allowed;
		}
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.v-avatar-item {
		position: relative;
		font-size: 12px;
		cursor: pointer;
		&:first-child {
			margin-left: 0;
		}
		&:hover {
			.v-avatar_hover {
				display: block;
			}
		}
		.v-avatar_hover {
			display: none;
			position: absolute;
			top: -10px;
			left: 50%;
			min-width: 130px;
			padding: 5px 10px;
			line-height: 22px;
			box-sizing: border-box;
			transform: translate(-50%, -100%);
			border-radius: 3px;
			word-break: break-all;
			color: #fff;
			background: #565656;
			z-index: 2;
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				border: 5px solid transparent;
				border-top-color: #565656;
				transform: translate(-50%, 100%);
			}
		}
	}
	.v-avatar_leave {
		color: #fff;
		font-size: 12px;
		background: #ff5858;
		z-index: 2;
	}
}

//数字动画 countUp
.v-count-up {
}

//滑块 slider
.v-slider {
	position: relative;
	width: 100%;
	.v-slider_runway {
		position: relative;
		// width:100%;
		flex: 1;
		height: 6px;
		background-color: #e4e7ed;
		border-radius: 3px;
		cursor: pointer;
		&.disabled {
			cursor: not-allowed;
		}
		.v-slider-bar {
			width: 0;
			height: 100%;
			border-radius: 3px 0 0 3px;
			background: #ff5858;
		}
		.v-slider-button {
			position: absolute;
			top: 50%;
			left: 0;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid #ff5858;
			background: #fff;
			transform: translate(-50%, -50%);
			&:hover {
				box-shadow: 0 0 10px #ee6e6e;
				.v-slider_hover {
					display: block;
				}
			}
			.v-slider_hover {
				display: none;
				position: absolute;
				top: -10px;
				left: 50%;
				height: 30px;
				line-height: 30px;
				padding: 0 8px;
				border-radius: 3px;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				transform: translate(-50%, -100%);
				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					border: 5px solid transparent;
					border-top-color: rgba(0, 0, 0, 0.5);
					transform: translate(-50%, 100%);
				}
			}
		}
	}
	.v-slider_inpNum {
		margin-left: 20px;
	}
}

//时间选择器 timePicker
.v-time-picker {
	width: 166px;
	position: relative;
	.v-time_drop {
		position: absolute;
		top: calc(100% + 5px);
		left: 0;
		width: 100%;
	}
}
